<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div id="app">
    <com-box @func="commitFather"></com-box>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.date">
            <span class="badge">评论人：{{item.user}}</span>
            {{item.comment}}
        </li>
    </ul>

</div>
<template id="comment">
    <div>
        <div class="form-group">
            <label>评论人：</label>
            <input type="text" class="form-control" v-model="user">
        </div>
        <div class="form-group">
            <label>评论内容：</label>
            <textarea class="form-control" v-model="context"></textarea>
        </div>
        <div class="form-group">
            <input type="button" value="发表评论" class="btn btn-primary" @click="commit">
        </div>


    </div>
</template>
<script>
    var commentbox = {
        template: '#comment',
        data() {
            return {
                context: '',
                user: ''
            }
        }, methods: {
            commit() {
                var data = {
                    user: this.user,
                    comment: this.context,
                    date: new Date()
                }
                this.$emit('func', data)
            }
        }

    }
    new Vue({
        el: '#app',
        data: {
            list: [
                {user: 'tom', comment: '哈哈哈哈哈哈', date: new Date()},
                {user: 'jerry', comment: '呵呵呵呵呵', date: new Date()},
                {user: 'Alice', comment: '米津玄师真是棒', date: new Date()},
            ]
        },
        methods: {
            commitFather(data) {
                this.list.push(data)
            }
        },
        components: {
            'comBox': commentbox
        }
    })
</script>
</body>
</html>